<template>
  <div v-cloak>
    <!-- <Top title="水珠钱包">
      <span slot="icon">
        <i class="iconfont icon-wenhao" @click="goHelpcenter"></i>
      </span>
    </Top> -->
    <div class="swiper">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item,index) in bannerList" :key="index">
          <img :src="item.titleImg" @click="goBannerPage(item.url)" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="product">
        <div class="product-list" v-for="(item,index) in productList" :key="index" @click="goChildPage(item.platformId)">
          <div class="product-list-logo">
            <div class="product-list-logo-img">
              <img v-lazy="item.logo" />
            </div>
            <!-- goChildPage(item.platformId) -->
          </div>
          <div class="product-list-content">
            <span class="title">{{item.abbreviation}}</span>
            <br/>
            <span class="badge" v-for="(itemS,idx) in item.label" :key="idx">{{itemS}}</span>
            <br/>
            <div class="money">
              <span class="money-rmb">¥</span>
              <span class="money-num">{{item.quato}}</span>
            </div>
          </div>
          <div class="product-list-icon">
            <i class="iconfont icon-jiankuohaoxiyou"></i>
          </div>
        </div>
        <div class="look-more" @click="lookMore" v-if="showMore">更多贷款&nbsp;
          <i class="iconfont icon-zhankaifuzhi"></i>
        </div>
        <div class="no-more" v-if="!showMore">
          <span>没有更多了</span>
          <p>没有找到合适的产品？点击这
            <a @click="quickMatch">更多产品</a>
          </p>
        </div>
      </div>
    </div>
    <Model title="" content="短期借款找水象分期" leftName="逛逛其他" rightName="申请" v-on:leftClick="leftBtn" v-on:rightClick="rightBtn" :showModel="productModel" v-on:closeClick="close"></Model>
  </div>
</template>
<script>
import Top from '../../components/Header'
import Model from '../../components/Modelbox'
import { Indicator } from 'mint-ui';
import Vue from 'vue'
import { Lazyload } from 'mint-ui';
Vue.use(Lazyload);
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
export default {
  name: 'home',
  components: { Top, Model },
  data() {
    return {
      // swiper的参数
      swiperOption: {
        initialSlide: 0,
        autoplay: 5000,
        speed: 1000,
        direction: 'horizontal',
        setWrapperSize: true,
        autoHeight: true,
        // effect: 'coverflow',
        coverflow: {
          rotate: 0,
          stretch: 10,
          depth: 40,
          modifier: 2,
          slideShadows: false
        },
        // loopedSlides:8,
        mouseWheelControl: true,
        // spaceBetween: 40,
        pagination: '.swiper-pagination',
        loop: false,
        loopedSlides: 8,
        loopAdditionalSlides: 6,
        // slidesPerView: 1.1,
        slidesPerView: 1,
        centeredSlides: true,
        observer: true,
        observeParents: false,
      },
      bannerList: [],
      productList: [],
      productModel: false,
      platformId: '',
      pageNum: 1,
      showMore: true,
      advantage: '',
      logo: ''
    }
  },
  methods: {
    goBannerPage(url) {

      // 记录流量
      let borrowerId = window.sessionStorage.getItem('borrowerId');
      let platformId = 0;
      let type = 2;
      let postData = {
        borrowerId: borrowerId,
        type: type
      }
      // this.$router.push({path:url})
      this.$http.post('/loansupermarket-app/personal/saveCustomerPlatformVisitInfo.do', postData)
        .then((response) => {
          var resBody = response.body;
          if (resBody.code == '000') {
            // 跳转banner链接
            window.location.href = url;
          }
        })
      
    },
    // 模态框逛逛其他
    leftBtn() {
      this.productModel = false;
    },
    // 模态框申请借款
    rightBtn() {
      // this.goChildPage(this.platformId)
      // window.location.href = "https://www.beadwallet.com/loanpage/html/Home/index.html?canInstallment=1";
      this.$router.push({path:'/loanplatformdetail',query: { platformId: '59' }})
    },
    // 模态框关闭按钮
    close() {
      this.productModel = false;
    },
    // 显示模态框
    showModel(platformId) {
      this.productModel = true;
    },
    // 点击进入帮助中心页面
    goHelpcenter() {
      this.$router.push({ path: '/helpcenter' })
    },
    // 进入产品详情页
    goChildPage(platformId) {
      this.$router.push({ path: '/loanplatformdetail', query: { platformId: platformId } })
      let borrowerId = window.sessionStorage.getItem('borrowerId');
      // 参数
      let postData = {
        borrowerId: borrowerId,
        platformId: platformId,
        type: 4
      }
      // 调用流量统计接口
      this.$http.post('/loansupermarket-app/personal/saveCustomerPlatformVisitInfo.do', postData)
        .then((response) => {
          var resBody = response.body;
          // console.log(resBody)
          if (resBody.code == '000') {

          }
        })

      //获取数据，并且实例化数据
      this.$http.post('/loansupermarket-app/platform/getPlatformDetail.do?platformId=' + platformId)
        .then((response) => {
          var resBody = response.body;
          // console.log(resBody);
          if (resBody.code == '000') {
            // 实例化数据
            this.detail = resBody.result;
            this.advantage = resBody.result.advantage;
            this.logo = resBody.result.logo;
            // console.log(resBody.result)
            this.detail.label = this.detail.label.split(",");
          }
        })
      this.platformId = platformId;
    },
    getList() {
      /* 
      @params
      @function 调用产品列表接口
    */
      this.$http.post('/loansupermarket-app/platform/getPlatformList.do?pageNum=' + this.pageNum + '&&pageSize=6')
        .then((response) => {
          var resBody = response.body;
          // console.log(resBody)
          if (resBody.code == '000') {
            // 给loading延迟0.5s，提升用户体验
            setTimeout(function () {
              Indicator.close();
            }, 500)
            // 数组拼接
            if (resBody.result.length != 0) {
              this.productList = this.productList.concat(resBody.result);
            }
            //判断是否还有更多
            if (resBody.result < 6) {
              this.showMore = false;
            }
            // 如果label为string，那么就拆分成数组
            this.productList.forEach(function (element) {
              if (typeof (element.label) == "string") {
                element.label = element.label.split(',');
              }

            });
          }
        })

    },
    lookMore() {
      Indicator.open('加载中···');
      // 页数+1
      this.pageNum += 1;
      this.getList();
    },
    quickMatch() {
      this.$router.push({ path: '/main/recommentproduct' });
      // 更多产品，进入全部产品页面
    }
  },
  created() {
    let that = this;
    /* 
      @params
      @function 调用banner列表接口
    */
    this.$http.post('/loansupermarket-app/index/getBannar.do')
      .then((response) => {
        var resBody = response.body;
        if (resBody.code == '000') {
          that.bannerList = resBody.result;
          // that.loopedSlides = that.bannerList.length * 8;
        } else {
          alert(resBody.msg);
        }
      })
    this.getList();
  },
  mounted() {
    let psw = this.$route.query.psw||'';
    let pho = this.$route.query.tel||'';
    // console.log(psw+'---')
    // console.log(pho+'****')
    var loginData = {
      phone:pho,
      loginType:1,
      password:psw
    }
    // 水象分期免登陆请求接口
    if(psw&&pho){
      this.$http.post('/loansupermarket-app/login/login',loginData)
      .then((response) => {
        var resBody = response.body;
        if (resBody.code == '000') {
          window.sessionStorage.setItem('tel',pho);
          window.sessionStorage.setItem('borrowerId',resBody.result.borrowerId);
        } else {
          this.$router.push({path:'/login'});
        }
      })
    }
    let borrowerId = window.sessionStorage.getItem('borrowerId');
    let platformId = 0;
    // 访问类型(1首页浏览量,2首页bannar点击量,3注册登录点击量,4首页产品点击量,5推荐产品点击量,6详情分享点击量,7提前花点击量)
    let type = 1;
    // 计数流量参数
    let postData = {
      borrowerId: borrowerId,
      type: 1
    }
    // 计数流量
    this.$http.post('/loansupermarket-app/personal/saveCustomerPlatformVisitInfo.do', postData)
      .then((response) => {
        var resBody = response.body;
        if (resBody.code == '000') {

        }
      })
    // if (!window.localStorage.getItem('once')) {
    //   window.localStorage.setItem('once', true)
    //   this.showModel();
    // }
  }
}
</script>
<style lang="scss">
@import '../../scss/variable/base.scss';
.swiper {
  // margin-top: 1.35rem;
  // margin-top: 1.2rem;
  .swiper-slide {
    width: 100%;
    height: 4.3rem !important;
    background: $primaryColor;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 0.6);
}

.product {
  margin-bottom: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0rem 0.4rem 0 0.4rem;
  &-list {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
    margin-top: 0.28rem;
    text-align: left;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    &-logo {
      flex: 2.5;
      &-img {
        width: 1.2rem;
        height: 1.2rem;
        margin: 0.8rem auto;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    &-content {
      flex: 8;
      box-sizing: border-box;
      .title {
        line-height: 1.15rem;
        font-size: 0.42rem;
        font-family: PingFangSC-Regular, sans-serif;;
      }
      .badge {
        display: inline-block;
        padding: 0 0.15rem;
        min-width: 1.1rem;
        line-height: 0.475rem;
        height: 0.44rem;
        text-align: center;
        border: 1px solid $primaryColor;
        color: $primaryColor;
        border-radius: 0.24rem;
        margin-right: 0.1rem;
      }
      .money {
        line-height: 0.9rem;
        &-rmb {
          font-family: PingFangSC-Regular, sans-serif;
          font-size: 0.6rem;
          color: $redColor;
        }
        &-num {
          font-family: PingFangSC-Regular, sans-serif;
          font-size: 0.75rem;
          color: $redColor;
          margin-left: 0.1rem;
          line-height: 1.2rem;
        }
      }
    }
    &-icon {
      flex: 1.5;
      line-height: 2.5rem;
      text-align: center;

      .iconfont {
        font-size: 0.45rem;
        vertical-align: -11%;
      }
    }
  }
  .look-more {
    margin-top: 0.4rem;
    font-size: 0.4rem;
    color: $iconColor;
    .iconfont {
      color: $iconColor;
      vertical-align: 3%;
    }
  }
  .no-more {
    margin-top: 0.3rem;
    font-size: 0.34rem;
    span {
      color: $iconColor;
    }
    p {
      span {
        color: $iconColor;
      }
      a {
        color: $primaryColor;
        text-decoration: underline;
      }
    }
  }
}
</style> 

